<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type"></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
                <el-form-item label="月份" prop="month">
                    <el-date-picker
                        v-model="search.month"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            show-footer
            :footer-method="footerMethod"
            :row-class-name="tableRowClassName"
            :max-height="maxHeight">
            <vxe-table-column title="月份" field="month" min-width="80"/>
            <vxe-table-column title="渠道类型" field="app_source.type" min-width="100" formatter="formatAppSourceType"/>
            <vxe-table-column title="渠道" field="source" formatter="formatAppSourceName" min-width="150"/>
            <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="活跃人数" field="loginUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="充值人数" field="payUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="充值金额(元)" field="pay" formatter="formatHumanRmb" min-width="90"/>
            <vxe-table-column title="积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="兑换积分" field="thirdExchange" :formatter="['formatW', 1]" min-width="90"/>
            <vxe-table-column title="推广费(元)" field="spreadCost" formatter="formatHumanRmb" min-width="110"/>
<!--            <vxe-table-column title="场内推广费(元)" field="cplTaskCost" formatter="formatHumanRmb" min-width="110"/>-->
            <vxe-table-column title="ARPPU" field="arppu" formatter="formatHumanRmb" min-width="80"/>
            <vxe-table-column title="ARPU" field="arpu" :formatter="['formatHumanRmb', 2]" min-width="80"/>
            <vxe-table-column title="ROI" field="roi" formatter="formatPercent" min-width="80"/>
<!--            <vxe-table-column title="净利润(元)" field="normalProfit" formatter="formatHumanRmb" :title-help="{message: '充值 - 积分 - 推广费'}" min-width="100"/>-->
        </vxe-table>
    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';
import VXETable from "vxe-table";
// import {formatsFunc} from "vxe-table/types/v-x-e-table/formats";

export default {
    components: {
        SelectAppSourceType,
    },
    data() {
        return {
            search: {
                source: '',
                source_type: '',
                month: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 300;
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/Month', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        tableRowClassName({row, rowIndex}) {
            // if (!row.GetAwardBullet) return '';
            // if (row.award_status === 1) return 'color-danger';
            // return 'color-success';
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: this.$route.meta.title + '-月报表',
                type: 'xlsx'
            })
        },
        footerMethod({ columns, data }) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 3;
            }, (sums, allFields) => {
                // 计算 arpu
                sums[allFields.arpu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.loginUser]);
                // 计算 arppu
                sums[allFields.arppu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.payUser]);
                // 计算 roi
                sums[allFields.roi] = this.$helper.calcDivision((sums[allFields.pay] - sums[allFields.thirdExchange]/this.$CURRENCY_HB_SCALE*100), sums[allFields.spreadCost]);
                return sums;
            });
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

